<template>
  <div>
    <div class="calendar">
      <div class="title flex">
        <div class="flex">
          <picker :value="selectDay.year+'-'+(selectDay.month+1)" @change="editMonth" mode="date" fields="month"
                  class="year-month">

            <div class="flex">
              <div>
                {{ selectDay.year }}.{{
                  selectDay.month > 8
                    ? selectDay.month + 1
                    : "0" + (selectDay.month + 1)
                }}
              </div>
              <div class="year-month-expand flexcolcenter flexcen">
                <image src="@/static/images/expand.png"></image>
              </div>
            </div>
          </picker>
          <!-- <div class="last-icon" @click="lastMonth"></div>
          <div class="next-icon" @click="nextMonth"></div> -->
        </div>
        <div @click="openChange" class="flexcolcenter flexcen open">
         <view>{{ open ? "收起" : "展开" }}</view>
          <image class="expand" :class="{'opened':open}" src="@/static/images/expand.png"></image>
        </div>
      </div>

      <!-- 日历头部 -->
      <div class="flex-around calendar-week">
        <div class="view">日</div>
        <div class="view">一</div>
        <div class="view">二</div>
        <div class="view">三</div>
        <div class="view">四</div>
        <div class="view">五</div>
        <div class="view">六</div>
      </div>

      <!-- 日历主体 -->
      <div class="calendar-main">
        <div class="date-group" :style="num">
          <div class="flex-start flex-wrap date-transform">
            <div v-for="(item,index) in dateList" :key="index" class="day">
              <div class="bg"
                   :class="{'other-month':item.year === selectDay.year && item.month !== selectDay.month,'select':item.dateString === selectDay.dateString}"
                   @click="selectChange(item.year,item.month,item.date)"
                   :data-date-string="item.dateString">
                {{ item.date }}
              </div>
              <div class="spot" v-if="item.spot"></div>
              <div class="spot2" v-if="item.spot2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const dayjs = require("../../components/calender/dayjs");
export default {
  data() {
    return {
      num: this.open
        ? `height:${(this.dateList.length / 7) * 72}rpx`
        : `height:72rpx`,
      dateList: [], //日历主体渲染数组
      selectDay: {
        year: new Date().getFullYear(),
        month: new Date().getMonth(),
        date: null,
        dateString: this.getNowDate(new Date()),
      }, //选中时间
      open: false, //日历是否展开
      spot: ["2022-07-08", "2022-07-05"],
      spot2: ["2022-07-09"],
      transform: 0, //收起时日历高度偏移倍数
    };
  },
  onReady() {
    const nowtMonth = dayjs(
      new Date(this.selectDay.year, this.selectDay.month)
    );
    this.setDate(nowtMonth.year(), nowtMonth.month());
  },
  methods: {
    //获取当前时间（格式化2022-02-09）
    getNowDate(data) {
      var a = data;
      var year = a.getFullYear();
      var month = a.getMonth() + 1;
      var date = a.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      return year + "-" + month + "-" + date;
    },
    //picker设置月份
    editMonth(e) {
      let dayStr = this.selectDay.dateString;
      const arr = e.detail.value.split("-");
      this.setDate(parseInt(arr[0]), parseInt(arr[1]) - 1);
      //默认之前选中的日期
      this.selectDay.dateString = dayStr;
    },
    //上月切换按钮点击
    lastMonth() {
      let dayStr = this.selectDay.dateString;
      const lastMonth = dayjs(
        new Date(this.selectDay.year, this.selectDay.month - 1)
      );
      this.setDate(lastMonth.year(), lastMonth.month());
      //默认之前选中的日期
      this.selectDay.dateString = dayStr;
    },
    //下月切换按钮点击
    nextMonth() {
      let dayStr = this.selectDay.dateString;
      const nextMonth = dayjs(
        new Date(this.selectDay.year, this.selectDay.month + 1)
      );
      this.setDate(nextMonth.year(), nextMonth.month());
      this.selectDay.dateString = dayStr;
    },
    //设置选中日期
    setDate(paramYear, paramMonth, paramDate) {
      const date = Math.min(
        dayjs(`${paramYear}-${paramMonth + 1}`).daysInMonth(),
        this.selectDay.date
      );
      const time = dayjs(`${paramYear}-${paramMonth + 1}-${paramDate || date}`);
      const selectDay = {
        year: paramYear,
        month: paramMonth,
        date: paramDate || date,
        dateString: time.format("YYYY-MM-DD"),
      };
      this.dateListInit(paramYear, paramMonth);
      //设置收起时的日历主体偏移量
      let dateListStart = dayjs(`${paramYear}-${paramMonth + 1}`).day(0);
      this.transform = dayjs(
        `${paramYear}-${paramMonth + 1}-${paramDate || date}`
      )
        .day(0)
        .diff(dateListStart, "week");
      if (paramYear !== this.selectDay.year) {
        this.selectDay = selectDay;
        this.dateListInit(paramYear, paramMonth);
        return;
      }
      if (paramMonth !== this.selectDay.month) {
        this.selectDay = selectDay;
        this.dateListInit(paramYear, paramMonth);
        return;
      }
      if (paramDate && paramDate !== this.selectDay.date) {
        this.selectDay = selectDay;
      }
    },

    //展开收起
    openChange() {
      this.open = !this.open;
      this.num = this.open
        ? `height:${(this.dateList.length / 7) * 72}rpx`
        : `height:72rpx`;
    },

    //日历主体的渲染方法
    dateListInit(
      paramYear = this.selectDay.year,
      paramMonth = this.selectDay.month
    ) {
      let dateList = []; //需要遍历的日历数组数据
      let startDate = dayjs(`${paramYear}-${paramMonth + 1}`).day(0); //日历渲染开始日期
      let endDate = dayjs(`${paramYear}-${paramMonth + 1}`)
        .endOf("month")
        .day(6); //日历主体渲染结束日期
      const timeArr = this.spot.map((item) => {
        return dayjs(item).format("YYYY-MM-DD");
      }); //底部小圆点需要展示的数组
      const timeArr2 = this.spot2.map((item) => {
        return dayjs(item).format("YYYY-MM-DD");
      }); //底部小圆点需要展示的数组
      while (startDate < endDate) {
        const dateString = startDate.format("YYYY-MM-DD");
        dateList.push({
          date: startDate.date(),
          month: startDate.month(),
          year: startDate.year(),
          dateString,
          spot: timeArr.indexOf(dateString) !== -1,
          spot2: timeArr2.indexOf(dateString) !== -1,
        });
        startDate = startDate.add(1, "day");
      }
      this.dateList = dateList;
    },

    //某一天被点击时
    selectChange(year, month, date) {
      this.setDate(year, month, date);
      let cnmonth = month + 1;
      if (cnmonth < 10) {
        cnmonth = "0" + cnmonth;
      }
      if (date < 10) {
        date = "0" + date;
      }
      this.selectDate = year + "-" + cnmonth + "-" + date;
      this.$emit("getGelectDay", this.selectDate);
    },
  },
  //监听参数变化
  // observers: {
  //   spot: function () {
  //     this.dateListInit()
  //   }
  // }
};
</script>

<style scoped lang="scss">
.year-month-expand {
  margin-left: 6rpx;
  width: 32rpx;
  height: 32rpx;
  background: #f5f6fa;
  image {
    margin: auto;
    width: 19rpx;
    height: 11rpx;
  }
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

.calendar {
  background-color: #fff;
}

.calendar .title {
  font-size: 40rpx;
  color: #333;
  padding: 30rpx 0;
  line-height: 60rpx;
}

.calendar .title .year-month {
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  margin-right: 20rpx;
}

.calendar .title .last-icon {
  width: 0;
  height: 0;
  border-right: 24rpx solid #999;
  border-top: 12rpx solid transparent;
  border-bottom: 12rpx solid transparent;
  margin-left: 10rpx;
}

.calendar .title .next-icon {
  width: 0;
  height: 0;
  border-left: 24rpx solid #999;
  border-top: 12rpx solid transparent;
  border-bottom: 12rpx solid transparent;
  margin-left: 40rpx;
}

.calendar .title .open {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  image {
    margin-left: 16rpx;
    width: 19rpx;
    height: 11rpx;
  }
  width: 128rpx;
  height: 48rpx;
  background: #f5f6fa;
  border-radius: 24rpx;
}

.calendar .calendar-week {
  line-height: 40rpx;
  padding: 0 0rpx;
  font-size: 28rpx;
  color: #999;
}

.calendar .calendar-week .view {
  width: 100rpx;
  text-align: center;
}

.calendar .calendar-main {
  padding: 30rpx 0rpx;
}

.calendar .calendar-main .date-group {
  transition: all 0.3s;
  overflow: hidden;
}

.calendar .calendar-main .date-transform {
  transition: all 0.3s;
}

.calendar .calendar-main .day {
  position: relative;
  /* width: 100rpx; */
  width: 14.28%;
  color: #666;
  text-align: center;
  height: 72rpx;
}

.calendar .calendar-main .day .bg {
  height: 56rpx;
  line-height: 56rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.calendar .calendar-main .day .select {
  width: 56rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  background: #ff4d03;
  margin: 0 auto;
}

.calendar .calendar-main .day .other-month {
  color: #ccc;
}

.calendar .calendar-main .day .spot {
  width: 8rpx;
  height: 8rpx;
  background-color: #ff4d03;
  border-radius: 50%;
  margin: 6rpx auto 0;
}
.spot2 {
  width: 8rpx;
  height: 8rpx;
  background-color: red;
  border-radius: 50%;
  margin: 6rpx auto 0;
}
.opened{
  transform: rotate(-180deg);
}
.expand{
  transition: all 0.3s ease;
}
</style>
